<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/static/favicon.ico}" rel="shortcut icon">

    <!--bootstrap5-->
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <script src="/static/js/bootstrap.bundle.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <!--layui-->
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/js/layui.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--    <script src="/static/js/axios.js"></script>-->


    <!--me-->

    <script src="/static/js/utils/http.js"></script>
    <!--me-->
    <link rel="stylesheet" href="/static/css/my-theme.css">
</head>
<body>
<div th:fragment="head">
    <!--    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">-->
    <!--        &lt;!&ndash; Navbar content &ndash;&gt;-->
    <!--        <div class="container">-->
    <!--            <a class="navbar-brand" href="#">-->
    <!--                <img src="/static/image/logo1.png" alt="" height="50">-->
    <!--            </a>-->
    <!--            <button class="navbar-toggler"-->
    <!--                    type="button" data-bs-toggle="collapse"-->
    <!--                    data-bs-target="#navbarSupportedContent"-->
    <!--                    aria-controls="navbarSupportedContent" aria-expanded="true"-->
    <!--                    aria-label="Toggle navigation">-->
    <!--                <span class="navbar-toggler-icon"></span>-->
    <!--            </button>-->
    <!--            <div class="collapse navbar-collapse" id="navbarSupportedContent">-->
    <!--                <ul class="navbar-nav ml-auto">-->
    <!--                    <li class="nav-item df-elx active">-->
    <!--                        <a class="nav-link d-flex align-items-center" href="#">Home</a>-->
    <!--                    </li>-->
    <!--                    <li class="nav-item df-elx">-->
    <!--                        <a class="nav-link d-flex align-items-center" href="#">Link</a>-->
    <!--                    </li>-->
    <!--                    <li class="nav-item df-elx dropdown">-->
    <!--                        <a class="nav-link d-flex align-items-center dropdown-toggle" href="#"-->
    <!--                           id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"-->
    <!--                           aria-expanded="false">-->
    <!--                            Dropdown-->
    <!--                        </a>-->
    <!--                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">-->
    <!--                            <a class="dropdown-item" href="#">Action</a>-->
    <!--                            <a class="dropdown-item" href="#">Another action</a>-->
    <!--                            <div class="dropdown-divider"></div>-->
    <!--                            <a class="dropdown-item" href="#">Something else here</a>-->
    <!--                        </div>-->
    <!--                    </li>-->
    <!--                    <li class="nav-item df-elx">-->
    <!--                        <a class="nav-link d-flex align-items-center disabled" href="#">Disabled</a>-->
    <!--                    </li>-->
    <!--                </ul>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </nav>-->
    <ul class="layui-nav layui-bg-blue" lay-filter="">

        <li class="layui-nav-item">
            <a href="/index">
<!--                <img src="/static/image/logo1.png" alt="" height="80">-->
                深圳社创科技有限公司
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">产品中心</a>
            <!-- 二级菜单 -->
            <dl class="layui-nav-child">

                <div th:each="item,index : ${productTypeList}">
                    <dd><a th:href="@{'/product/menu/'+${item.id}}" th:text="${item.name}"></a></dd>
                </div>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="#">解决方案</a>
            <!-- 二级菜单 -->
            <dl class="layui-nav-child">
                <div th:each="item,index : ${solutionTypeList}">
                    <dd><a th:href="@{'/solution/menu/'+${item.id}}" th:text="${item.name}"></a></dd>
                </div>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="#">新闻中心</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="/news/industry-dynamic">行业热点</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="#">关于我们</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="/abouts/company">公司概况</a></dd>
                <dd><a href="/abouts/contact">联系我们</a></dd>
                <dd><a href="/abouts/join">加入我们</a></dd>
            </dl>
        </li>
    </ul>

    <!--轮播-->
    <!--    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">-->
    <!--        &lt;!&ndash; Indicators &ndash;&gt;-->
    <!--        <ol class="carousel-indicators" id="olnum">-->
    <!--            &lt;!&ndash;填充到这里&ndash;&gt;-->
    <!--        </ol>-->
    <!--        &lt;!&ndash; Wrapper for slides &ndash;&gt;-->
    <!--        <div class="carousel-inner" role="listbox" id="lunbotu">-->
    <!--            &lt;!&ndash;填充到这里&ndash;&gt;-->
    <!--        </div>-->

    <!--        &lt;!&ndash; Controls &ndash;&gt;-->
    <!--        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">-->
    <!--            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
    <!--            <span class="sr-only">Previous</span>-->
    <!--        </a>-->
    <!--        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">-->
    <!--            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
    <!--            <span class="sr-only">Next</span>-->
    <!--        </a>-->
    <!--    </div>-->
    <div class="layui-carousel" id="test1">
        <div carousel-item id="picture">
            <!--            <div>-->
            <!--                <img src="/static/image/banner-1.png" alt="">-->
            <!--            </div>-->
            <!--            <div>-->
            <!--                <img src="/static/image/banner-2.png" alt="">-->
            <!--            </div>-->
        </div>
    </div>
    <!-- 条目中可以是任意内容，如：<img src=""> -->

    <!--面包屑-->
    <!--    <div>-->
    <!--        <span class="layui-breadcrumb">-->
    <!--          <a href="">首页</a>-->
    <!--          <a href="">国际新闻</a>-->
    <!--          <a href="">亚太地区</a>-->
    <!--          <a><cite>正文</cite></a>-->
    <!--        </span>-->
    <!--    </div>-->

</div>

</body>
<!--<script src="/static/js/api/carousel.js" type="module"></script>-->
<script type="text/javascript">
    axios({
        url: `/carousel/all`,
        method: 'get'
    }).then(res => {
            let html = "";
            res.data.forEach(item => {
                html += '<div><img id="lunboimg" src="' + item.imgUrl + '"></div>';
            })
            $("#picture").append(html);
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        let ins;
        layui.use(['element', 'jquery'], function () {
            var element = layui.element;


            var carousel = layui.carousel;
            //建造实例
            ins = carousel.render({
                elem: '#test1'
                , width: '100%' //设置容器宽度
                , height: 520
                , arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
            ins.reload({elem: '#test1'});//重置轮播图
        });
        }
    )



</script>

</html>